<template>
    <div class="model-form">
        <el-page-header @back="goBack" content="更新商家">
        </el-page-header>
        <div class="model-content">
            <el-form ref="ruleForm" :rules="rules" :model="form" label-width="160px">
                <el-row :gutter="10">
                    <el-col :span="24">
                        <el-form-item label="门头" size="mini" prop="logo">
                            <avatar v-model="form.logo"></avatar>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商家名称" size="mini" prop="name">
                            <el-input v-model="form.name" name="name">
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属分类" size="mini" prop="shopCatalog">
                            <el-select style="width: 100%;" v-model="form.shopCatalog" filterable clearable
                                       placeholder="请选择">
                                <el-option v-for="item in shopCatalogOptions" :key="item.id"
                                           :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="地址" size="mini" prop="address">
                            <el-input v-model="form.address" name="address">
                                <template #append>
                                    <el-button type="primary" size="small" @click="geo">定位</el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="地图信息" size="mini">
                            <qqmap zoom="18" @poi-change="changePoi" :lat="form.lat" :lng="form.lng"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属连锁" size="mini" prop="shopCatalog">
                            <el-select style="width: 100%;" v-model="form.parent" filterable clearable
                                       placeholder="请选择">
                                <el-option v-for="item in chains" :key="item.id"
                                           :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系人" size="mini" prop="contact">
                            <el-input v-model="form.contact" name="contact">
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客服电话" size="mini" prop="tel">
                            <el-input v-model="form.tel" name="tel">
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="费用金额" size="mini" prop="fee">
                            <el-input v-model="form.fee" name="fee">
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="消费券名称" size="mini" prop="couponName">
                            <el-input v-model="form.couponName" name="couponName">
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="消费券金额" size="mini" prop="couponFee">
                            <el-input v-model="form.couponFee" name="couponFee">
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="商家介绍" size="mini" prop="note">
                            <el-input v-model="form.note" name="note" type="textarea">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="网红特权" size="mini" prop="note">
                            <el-input v-model="form.privilege" name="note" type="textarea">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="23">
                        <el-form-item label="商家环境" size="mini" prop="couponFee">
                            <el-upload
                                    v-model:file-list="form.images"
                                    action="https://cloud.newbyte.ltd/storage/upload.htm"
                                    list-type="picture-card"
                                    :on-remove="handleRemove"
                                    :on-success="uploadSuccess"
                                    :on-preview="handlePictureCardPreview"
                                    :before-remove="beforeRemove"
                            >
                                <el-icon>
                                    <Plus/>
                                </el-icon>
                            </el-upload>

                            <el-dialog v-model="dialogVisible">
                                <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 99%;height: auto; "/>
                            </el-dialog>
                        </el-form-item>

                    </el-col>
                    <el-col :span="22">
                        <el-form-item>
                            <el-button @click="goBack">取消</el-button>
                            <el-button type="primary" @click="updateData">确定</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>


</template>

<script>
import avatar from "@/components/avatar.vue";

import common from "@/mixins/common.js";
import qqmap from "@/components/qqmap.vue";

export default {
    name: "shop_update",
    mixins: [common],
    components: {
        avatar, qqmap
    },
    data() {
        return {
            dialogVisible: false,
            dialogImageUrl: "",
            form: {
                logo: '',
                name: '',
                shopCatalog: '',
                sortNum: '',
                address: '',
                contact: '',
                tel: '',
                fee: '',
                couponName: '',
                couponFee: '',
                lat: "",
                lng: "",
                note: "",
                privilege:""
            },
            shopCatalogOptions: [],
            chains: [],
            rules: {
                name: [
                    {required: true, message: '请输入商家名称', trigger: 'blur'}
                ],
                address: [
                    {required: true, message: '请输入地址', trigger: 'blur'}
                ],
                fee: [
                    {required: true, message: '请输入费用金额', trigger: 'blur'}
                ],
                couponName: [
                    {required: true, message: '请输入消费券名称', trigger: 'blur'}
                ],
                couponFee: [
                    {required: true, message: '请输入消费券金额', trigger: 'blur'}
                ],
                logo: [
                    {required: true, message: '请上传门头', trigger: 'blur'}
                ]
            }
        }
    },
    async mounted() {
        let id = this.$route.query.id;
        let data = {};
        data.id = id;
        let res = await this.$http.form("/tenantRest/shop/view.htm", data);
        if (res.code === 0) {
            this.form = res;
        }
        this.loadShopCatalogOptions().then();
        this.loadChainShops().then();
    },
    methods: {
        handlePictureCardPreview(uploadFile) {
            this.dialogImageUrl = uploadFile.url;
            this.dialogVisible = true
        },
        async beforeRemove() {
            try {
                await this.$confirm('此操作将删除当前图片,是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                return true;
            } catch (e) {

            }
            return false;
        },
        async handleRemove(e) {
            if (e.id) {
                let param = {};
                param.id = e.id;
                let back = await this.$http.form("/tenantRest/shopimage/delete.htm", param);
                if (back.code === 0) {

                }
            }
        },
        async uploadSuccess(res, uploadFile) {
            console.info(res)
            this.src = res.url;
            let param = {};
            param.url = res.url;
            param.shop = this.form.id;
            let back = await this.$http.form("/tenantRest/shopimage/create.htm", param);
            if (back.code === 0) {
                //this.form.images.pop();
                // this.form.images.push(back);
                uploadFile.id = back.id;
                uploadFile.url = back.url;
            }
        },
        async geo() {
            let param = {};
            param.address = this.form.address;
            let self = this;
            let result = await this.$http.form("/tenantRest/area/lbs.htm", param);
            if (result.code == 0) {
                self.form.lat = result.lat;
                self.form.lng = result.lng;
                if (result.provinceId) {
                    self.form.province = result.provinceId;
                }
                if (result.cityId) {
                    self.form.city = result.cityId;
                }
                if (result.countyId) {
                    self.form.county = result.countyId;
                }
            }
        },
        changePoi(event) {
            console.log(event);
            this.form.lat = event.lat;
            this.form.lng = event.lng;
        },
        async updateData() {
            try {
                let res = await this.$refs["ruleForm"].validate();
                if (!res) {
                    return;
                }
            } catch (e) {
                return;
            }
            await this.updateDataPost();
        },
        async updateDataPost() {
            let res = await this.$http.form("/tenantRest/shop/update.htm", this.form);
            if (res.code !== 0) {
                this.$message.error(res.msg);
                return
            }
            this.$message({
                message: '更新数据成功',
                type: 'success'
            });
            this.$router.go(-1);
        },
        async loadShopCatalogOptions() {
            let self = this;
            let param = {};
            param.sortMethod = "asc";
            param.sortField = "id";
            param.level = 1;
            param.size = 500;
            param.fetch = 0;
            let res = await this.$http.form("/tenantRest/shopcatalog/list.htm", param);
            if (res.code === 0) {
                self.shopCatalogOptions = res.list;
            }
        },
        async loadChainShops() {
            let self = this;
            let param = {};
            param.sortMethod = "asc";
            param.sortField = "id";
            param.level = 1;
            param.size = 500;
            param.fetch = 0;
            param.shopType = "chain";
            let res = await this.$http.form("/tenantRest/shop/list.htm", param);
            if (res.code === 0) {
                let shop = {};
                shop.id = "-1";
                shop.name = "单店商家";
                self.chains = [shop,...res.list];
            }
        },
    }
}


</script>

<style scoped>

</style>
